<template>
	<!-- 轮播 -->
	<el-carousel :interval="1000" type="card" height="400px">
		<el-carousel-item
			v-for="(item, index) in data.bannerList"
			:key="index"
			style="height: 400px"
		>
			<el-image style="height: 100%" :src="item.imageUrl" fit="fill" />
		</el-carousel-item>
	</el-carousel>

	<h2 class="title">推荐歌单</h2>
	<!-- 推荐歌单 -->
	<div class="personalBox">
		<el-card
			class="card"
			v-for="item in data.personalizedList"
			:key="item.id"
			shadow="hover"
		>
			<span class="playCount"
				><el-icon :size="15" style="margin-right: 5px"><video-play /></el-icon
				>{{ (item.playCount / 10000).toFixed(1) }}万</span
			>
			<el-image
				class="img"
				style="height: 100%"
				:src="item.picUrl"
				fit="fill"
			/>
			<div style="padding: 14px">
				<p>{{ item.name }}</p>
			</div>
		</el-card>
	</div>
	<h2 class="title">推荐MV</h2>
	<!-- 推荐歌单 -->
	<div class="personalBox">
		<el-card
			style="width: 24%"
			class="card"
			v-for="item in data.mvList"
			:key="item.id"
			shadow="hover"
		>
			<span class="playCount"
				><el-icon :size="15" style="margin-right: 5px"><video-play /></el-icon
				>{{ item.playCount }}</span
			>
			<el-image
				class="img"
				style="height: 200px; width: 100%"
				:src="item.picUrl"
				fit="cover"
			/>
			<div style="padding: 14px">
				<p>{{ item.name }}</p>
			</div>
		</el-card>
	</div>
</template>

<script setup>
import { VideoPlay } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { getBanner, getPersonalized, getMvList } from "@/api/index";
let data = reactive({
	bannerList: [],
	personalizedList: [],
	mvList: [],
});
/* Banner数据 */
getBanner().then((res) => {
	data.bannerList = res.banners;
});
/* 推荐歌单 */
getPersonalized().then((res) => {
	data.personalizedList = res.result;
});
/* 推荐Mv */
getMvList().then((res) => {
	data.mvList = res.result;
});
</script>
<style lang="scss" scoped>
.title {
	margin-bottom: 30px;
}
.personalBox {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.card {
		position: relative;
		width: 19%;
		margin-bottom: 15px;
		.playCount {
			position: absolute;
			display: flex;
			right: 30px;
			top: 30px;
			color: #ffffff;
			align-items: center;
			font-size: 15px;
			line-height: 15px;
			z-index: 11;
		}
		.img {
			border-radius: 5px;
		}
	}
}
</style>
